<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="title"
    :showTop="false"
    :dark="loaded ? false : true"
    :callBackUrl="gotoMyTabUrl"
    :hideSafeArea="true"
  >
    <view class="major-wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <view class="top-box">
        <view>选科组合：{{ currentSubject }}</view>
        <view @click="openChooseSubject">更换选科</view>
      </view>
      <view class="second-box">
        <view
          :class="
            currentType == item.name
              ? 'active-second-box-item'
              : 'second-box-item'
          "
          v-for="(item, index) in secondInfoList"
          :key="index"
          @click="changeCurrentType(item)"
        >
          <view class="name"> {{ item.name }}（{{ item.number }}个）</view>
          <view class="per">匹配率{{ Number(item.percent).toFixed(2) }}%</view>
        </view>
      </view>
      <view class="third-box">
        <majorFilterList
          v-if="currentType == '专业匹配'"
          :specialStyle="{ height: contentHeight }"
          ref="filterListRef"
          :subjectCombination="subjectCombination"
          :currentSubject="currentSubject"
          @changeCptype="changeCptype"
        />
        <schoolFilterList
          :subjectCombination="subjectCombination"
          :currentSubject="currentSubject"
          v-if="currentType == '院校匹配'"
          :specialStyle="{ height: contentHeight }"
        />
      </view>
    </view>
    <u-popup v-model="showChooseSubjectPopup" mode="bottom" border-radius="14">
      <view class="choose-subject">
        <view class="choose-title">
          <view class="left">首选</view>
          <view class="right">选择一门学科</view>
        </view>
        <view class="choose-box">
          <view
            :class="
              item.id == currentFirstSubject.id
                ? 'choose-box-item-selected'
                : 'choose-box-item'
            "
            v-for="(item, index) in firstSubject"
            :key="index"
            @click="selectFirstSubject(item)"
            >{{ item.name }}
          </view>
        </view>
        <view class="choose-title">
          <view class="left">再选</view>
          <view class="right">选择二门学科</view>
        </view>
        <view class="choose-box">
          <view
            :class="
              currentSecondSubjectList.includes(item)
                ? 'choose-box-item-selected'
                : 'choose-box-item'
            "
            v-for="(item, index) in secondSubject"
            :key="index"
            @click="selectSecondSubject(item)"
            >{{ item.name }}
          </view>
        </view>
        <view class="search-btn" @click="changeData">确定</view>
      </view>
    </u-popup>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import { cardRegist } from '@/api/modules/career';
import majorFilterList from '../components/majorFilterList';
import schoolFilterList from '../components/schoolFilterList.vue';
import { getProfessionMatchRate } from '@/api/modules/gk';

import ShareMixin from '@/mixins/share';
import LoginDialog from '@/components/LoginDialog';
export default {
  mixins: [ShareMixin],
  components: {
    majorFilterList,
    schoolFilterList,
    LoginDialog,
  },
  data() {
    return {
      cpType: '30',
      personId: '',
      shareTitle: '震惊！同分数段的同学，靠选科组合提前锁定百万年薪赛道',
      sharePath:
        '/pagesSub/nationalCollegeEntranceExamination/searchMajor/index',
      imageUrl:
        'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png',
      firstSubject: [
        {
          name: '物理',
          id: '11',
        },
        {
          name: '历史',
          id: '12',
        },
      ],
      secondSubject: [
        {
          id: '14',
          name: '化学',
        },
        {
          name: '生物',
          id: '13',
        },
        {
          name: '政治',
          id: '15',
        },
        {
          name: '地理',
          id: '16',
        },
      ],
      currentFirstSubject: {}, // 当前选中的必须按科目
      currentSecondSubjectList: [], // 选择两个科目的数据
      showChooseSubjectPopup: false,
      contentHeight: '100vh',
      currentType: '专业匹配',
      title: '选科查专业/院校',
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      navHeight: getApp().globalData.navHeight,
      currentSubject: '历史、地理、政治',
      subjectCombination: '',
      secondInfoList: [
        {
          name: '专业匹配',
          number: '15151',
          percent: '46.5%',
        },
        {
          name: '院校匹配',
          number: '15151',
          percent: '46.5%',
        },
      ],
    };
  },
  onLoad(opt) {
    console.log(
      'opt',
      opt,
      decodeURIComponent(opt.currentFirstSubject),
      decodeURIComponent(opt.currentSecondSubjectList)
    );
    this.currentSubject =
      JSON.parse(decodeURIComponent(opt.currentFirstSubject)).name +
      '、' +
      JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[0].name +
      '、' +
      JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[1].name;
    this.subjectCombination =
      JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[0].id <
      JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[1].id
        ? JSON.parse(decodeURIComponent(opt.currentFirstSubject)).id +
          ',' +
          JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[0].id +
          ',' +
          JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[1].id
        : JSON.parse(decodeURIComponent(opt.currentFirstSubject)).id +
          ',' +
          JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[1].id +
          ',' +
          JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[0].id;

    this.currentFirstSubject = JSON.parse(
      decodeURIComponent(opt.currentFirstSubject)
    );
    this.currentSecondSubjectList = [];
    this.secondSubject.forEach((item, index) => {
      if (
        item.id ==
          JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[0].id ||
        item.id ==
          JSON.parse(decodeURIComponent(opt.currentSecondSubjectList))[1].id
      ) {
        this.currentSecondSubjectList.push(item);
      }
    });
    this.getProfessionMatchRateFn();
    if (!this.personId) {
      this.$refs.loginDialog.setVisibility(true);
      return;
    }
    this.imageUrl =
      'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png'; //必须重新赋值
    this.sharePath =
      '/pagesSub/nationalCollegeEntranceExamination/searchMajor/index?currentFirstSubject=' +
      encodeURIComponent(JSON.stringify(this.currentFirstSubject)) +
      '&currentSecondSubjectList=' +
      encodeURIComponent(JSON.stringify(this.currentSecondSubjectList));
  },
  methods: {
    changeCptype(cpType) {
      this.cpType = cpType;
      console.log('changeCptype', this.cpType);
      this.getProfessionMatchRateFn();
    },
    async cardRegistFn() {
      const params = {
        personId: this.personId,
        force: 1,
      };
      params.cardType = 143;
      const res = await cardRegist(params);
      return res;
    },
    loginSuccessBack() {
      //TODO:登录成功后触发埋点
      this.personId = uni.getStorageSync('person-id').slice(2);
      this.cardRegistFn();
    },
    changeData() {
      if (
        this.currentSecondSubjectList.length == 2 &&
        this.currentFirstSubject.id
      ) {
        this.currentSubject =
          this.currentFirstSubject.name +
          '、' +
          this.currentSecondSubjectList[0].name +
          '、' +
          this.currentSecondSubjectList[1].name;
        this.subjectCombination =
          this.currentSecondSubjectList[0].id <
          this.currentSecondSubjectList[1].id
            ? this.currentFirstSubject.id +
              ',' +
              this.currentSecondSubjectList[0].id +
              ',' +
              this.currentSecondSubjectList[1].id
            : this.currentFirstSubject.id +
              ',' +
              this.currentSecondSubjectList[1].id +
              ',' +
              this.currentSecondSubjectList[0].id;
        this.getProfessionMatchRateFn();
      }
    },
    selectFirstSubject(item) {
      this.currentFirstSubject = item;
    },
    selectSecondSubject(item) {
      if (this.currentSecondSubjectList.includes(item)) {
        return;
      } else {
        this.currentSecondSubjectList.push(item);
        if (this.currentSecondSubjectList.length > 2) {
          this.currentSecondSubjectList.shift();
        }
      }
    },
    openChooseSubject() {
      this.showChooseSubjectPopup = true;
    },
    async getProfessionMatchRateFn() {
      const params = {
        cpType: this.cpType,
        subjectCombination: this.subjectCombination,
        csType: '1',
      };
      const res = await getProfessionMatchRate(params);
      if (res.code == 200) {
        console.log('res', res);
        this.secondInfoList[0].percent = res.data.professionMatchRate;
        this.secondInfoList[0].number = res.data.distinctProfessionNum;
        this.secondInfoList[1].percent = res.data.collegeMatchRate;
        this.secondInfoList[1].number = res.data.collegeNum;
        this.showChooseSubjectPopup = false;
      }
    },
    changeCurrentType(item) {
      this.currentType = item.name;
    },
  },
};
</script>
<style lang="scss" scoped>
$img-base-person: $img-base + 'careerPath/';
.major-wrapper {
  background-image: url($img-base + 'careerPath/majorDetailBg.png');
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 0 32rpx;
  position: relative;
  overflow: hidden;
  .top-box {
    height: 68rpx;
    background: #b8e2fa;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50rpx 0 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #33609f;
  }
  .second-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 36rpx;
    padding-bottom: 30rpx;
    .second-box-item,
    .active-second-box-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 332rpx;
      padding: 20rpx 24rpx;
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
      }
      .per {
        font-weight: bold;
        font-size: 24rpx;
        font-family: PingFang-SC, PingFang-SC;
      }
    }
    .second-box-item {
      height: 122rpx;
      background: linear-gradient(180deg, #edf5ff 0%, #fcfdff 100%);
      border-radius: 12rpx;
      border: 4rpx solid #e4e8f1;
      .per {
        color: #999999;
      }
    }
    .active-second-box-item {
      height: 122rpx;
      background: linear-gradient(180deg, #ffeae8 0%, #fdfbfc 100%);
      border: 4rpx solid #f65b3c;
      border-radius: 12rpx;
      color: #f65b3c;
      position: relative;
    }
    .active-second-box-item :after,
    .active-second-box-item :before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .active-second-box-item :after {
      border-color: rgba(19, 26, 213, 0);
      border-top-color: #fdfbfc;
      border-width: 10rpx;
      margin-left: -10rpx;
    }
    .active-second-box-item :before {
      border-color: rgba(0, 0, 0, 0);
      border-top-color: #f65b3c;
      border-width: 16rpx;
      margin-left: -16rpx;
    }
  }
  .third-box {
    position: absolute;
    left: 0;
    background: #ffffff;
  }
}
.choose-subject {
  height: 578rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-top: 46rpx;
  padding: 24rpx;
  .choose-title {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    .left {
      height: 42rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #222222;
      line-height: 42rpx;
    }
    .right {
      height: 36rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      line-height: 36rpx;
      margin-left: 24rpx;
    }
  }
  .choose-box {
    margin: 28rpx 0 40rpx 0;
    display: flex;
    align-items: center;
    .choose-box-item,
    .choose-box-item-selected {
      width: 146rpx;
      height: 72rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
      font-size: 28rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .choose-box-item {
      border: 2rpx solid #d9d9d9;
      color: #333333;
    }
    .choose-box-item-selected {
      border: 2rpx solid #f75a3e;
      color: #f75a3e;
    }
  }
  .show-data {
    height: 78rpx;
    background: #f5fbff;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .blue-column {
      width: 2rpx;
      height: 38rpx;
      border: 2rpx solid #b6d5e8;
      margin: 0 30rpx;
      background-color: #b6d5e8;
    }
    .left-data {
      color: #4079a8;
      font-size: 24rpx;
      span {
        margin-left: 8rpx;
        font-size: 28rpx;
        color: #ff8c00;
      }
    }
    .right-data {
      color: #4079a8;
      font-size: 24rpx;
      span {
        margin-left: 8rpx;
        font-size: 28rpx;
        color: #00ac51;
      }
    }
  }
  .search-btn {
    height: 80rpx;
    background: #f75a3e;
    border-radius: 8rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #ffffff;
  }
}
</style>
